<html>
<head>
  <style>
    body
    {
      margin:0;
    }
   
    div.top
    {
      //behavior: magnifier;
      behavior: accesskeys actions magnifier;
    
      position:relative;
      overflow-y: visible;       
      padding-top:4px;
      padding-left:*;
      padding-right:*;
      
      width:min-intrinsic;
      
      flow: horizontal;
      height: 60px; 
      background-image:url(strip.png);
      background-position:60px 8px 0px 8px; /*top right bottom left offsets - we will stretch image in full*/
      background-repeat:expand; /* h-smile specific */
    }
    
    div.body
    {
      width: 50%;
      margin: 0 *; 
    }

    widget[type=button] 
    { 
      position:relative;
      padding:0;
      border:0;
      background-repeat: stretch;
      width:64px; 
      height:64px; 
    }
    
    widget#icon1
    {
      background-image: url(icon1.png);
    }
    widget#icon2
    {
      background-image: url(icon2.png);
    }
    
    widget#icon3
    {
      background-image: url(icon3.png);
    }
    widget#icon3[magnified]
    {
      background-image: url(icon3m.png);
    }
    widget#icon4
    {
      background-image: url(icon4.png);
      //max-width:96px;
      //max-height:96px;
    }
    widget#icon4[magnified]
    {
      background-image: url(icon4m.png);
    }

    /* Here are styles for that scalable table */

    div.top > table
    {
      position:relative;
      font:5px verdana; // normally it is small
      border-spacing:1px;
      width:54px;
      height:54px;
    }
    
    div.top > table td
    {
      border:1px solid black;
      background-color:orange;
      behavior:button; 
      text-align:center;
      vertical-align:middle;
    }
    
    div.top > table td:hover
    {
      background-color:yellow;
    }

    div.top > table td:active
    {
      background-color:white;
    }
    
    div.top > table button
    {
      font:inherit;
    }

    div.top > table[magnified="1.25"]
    {
      font-size:7px; // slightly bigger
    }

    div.top > table[magnified="1.50"]
    {
      font-size:9px; // slightly bigger
    }
    div.top > table[magnified="1.75"]
    {
      font-size:11px; // bigger
    }
    div.top > table[magnified="2.00"]
    {
      font-size:13px; // something readable
    }
    
   
  </style>
</head>
<body>
  <div .top magnify='widget[type="button"],table' magnification=2.0 radius-x=200 radius-y=100 >
    <widget type="button" #icon1 action="alert:1 pressed"></widget>
    <widget type="button" #icon2></widget>
    <widget type="button" #icon3></widget>
    <widget type="button" #icon4></widget>
    <table>
      <tr><td>7</td><td>8</td><td>9</td></tr>
      <tr><td>4</td><td>5</td><td>6</td></tr>
      <tr><td>1</td><td>2</td><td>3</td></tr>
      <tr><td colspan=2>0</td><td>.</td></tr>
    </table>
  </div>
  <div .body>
  <h1 align=center>Fisheye demo</h1>
    <p>This is an example of <code>behavior:magnifier</code>. This behavior can be assigned to any container element.</p>
    <p>Attribute <code>magnify</code> ot the container element defines CSS selector of elements that will be magnfied when mouse will move around them.</p>
    <p>Other attributes that <code>behavior:magnifier</code> knows about:</p>
    <ul>
      <li><code>magnify</code> - CSS selector of child elements to magnify;</li>
      <li><code>radius</code> - "fisheye" radii - distance in which mouse movements will take effect, in pixels;</li>
      <li><code>radius-x</code> and <code>radius-y</code> - the same as the above but allow to define elliptical sensitive area;</li>
      <li><code>magnification</code> - maximum magnification, by default is 2.0.</li>
      <li><code>magnification-step</code> - maximum magnification step, by default is 0.15.</li>
    </ul>
    <p>Magnified elements will get attribute <code>magnified="N.NN"</code> set. Where <code>N.NN</code> is a value of current magnification. 
       This value is multiple of 0.25 so for magnification=2.0 this attribute will take values: 1.25, 1.50, 1.75, 2.00.</p>
    <p>Use <code>magnified</code> attribute to tune up font sizes or images in different scale factors.</p>
  </div>

</body>
</html>

